<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧二</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            /*使用固定定位，紧贴着html的4个边，就可以与整个页面窗口一样大*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<!--遮罩层-->
<div class="mask"></div>
<!--内容-->
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cupiditate eaque nisi optio quisquam. A alias
    aliquid, consectetur consequatur corporis, deserunt ducimus eius provident quam quidem rerum sapiente similique vel.
</div>
<div>Ab alias amet asperiores, autem beatae cupiditate dolorem doloribus eius enim expedita harum hic id modi nisi non
    nulla praesentium provident quam quasi qui quis repellendus rerum sequi ullam vel!
</div>
<div>Accusamus animi, autem consequuntur iste maiores nam nulla, odit optio perferendis provident quos ratione
    recusandae reiciendis rem repellat repellendus saepe! Accusantium in libero perspiciatis rerum sapiente suscipit
    unde! Nobis, quasi?
</div>
<div>Non, quam, voluptates! A, accusamus adipisci aliquam amet at aut commodi, consequuntur deserunt dignissimos
    distinctio dolorum ex ipsa magni odit pariatur placeat quod quos, recusandae reiciendis repellendus similique sint
    vel.
</div>
<div>Atque, consectetur cum et expedita fuga labore maiores nobis numquam quam quia quis, sint totam, ullam! Commodi
    dignissimos id nihil porro reprehenderit sequi. Asperiores eos excepturi iste, perferendis quod sequi.
</div>
<div>Alias aliquid asperiores autem corporis dignissimos, dolor dolorem eaque excepturi, fugit id illo ipsa laboriosam
    nemo nobis placeat quae quaerat quisquam rerum, saepe temporibus! Ad beatae debitis non recusandae rem!
</div>
<div>A aliquid dicta doloremque earum fuga illum labore magni nam odio, perferendis! Cupiditate dicta distinctio
    doloribus eos ex expedita, facilis illum iste natus nostrum optio provident repellendus ullam, veritatis voluptatum.
</div>
<div>Dolor eos nostrum perferendis. A accusantium architecto aspernatur atque blanditiis cum debitis deleniti dolor,
    eaque earum eos fugit ipsa iusto modi molestias nam optio quae quia sapiente similique tempora voluptatibus.
</div>
<div>Asperiores commodi consequatur delectus eligendi exercitationem fuga in iste magnam mollitia optio pariatur porro
    provident qui recusandae reiciendis repellendus sed ullam, vero! At corporis dolorum expedita iusto, necessitatibus
    vel vitae!
</div>
<div>Ad deleniti dolore, esse ipsam, itaque molestias porro quibusdam ratione, reiciendis repellat reprehenderit sequi
    tempore voluptate! Dolorum error incidunt minus mollitia nobis quae ratione tenetur velit voluptas. Nostrum,
    placeat, quidem.
</div>
<div>A assumenda delectus doloremque earum eligendi est facere fugit iusto natus, neque quas quasi reprehenderit
    temporibus! Accusamus animi dicta itaque iusto libero molestias perferendis quidem, quos, repellat soluta tempora
    voluptate!
</div>
<div>Aperiam asperiores atque consequuntur delectus dignissimos dolores ducimus eius est, facere harum id iusto
    laboriosam maiores molestiae molestias necessitatibus, nobis officiis pariatur perspiciatis porro quibusdam
    recusandae repudiandae sed unde voluptatum!
</div>
<div>Alias beatae dolorem est facere inventore minima minus nam quam saepe. Culpa, ducimus quibusdam! Accusamus aperiam
    cupiditate earum eius enim excepturi in ipsam labore laborum quam totam ullam, voluptate voluptatum?
</div>
<div>Assumenda beatae consequuntur cum ea, eius enim expedita harum libero minus quia suscipit unde. Alias atque dicta
    eos fugit laborum, minima nostrum numquam omnis pariatur quae reprehenderit tenetur velit voluptatum!
</div>
<div>A animi commodi dicta doloribus et nesciunt pariatur suscipit voluptate. Deleniti dicta dolorem fugiat minima odit
    officiis, quas quibusdam voluptatibus. Eum fugit illo laudantium neque placeat provident quam? Autem, voluptatum.
</div>
<div>Ad amet architecto consectetur consequuntur cumque deleniti earum error expedita harum impedit, in ipsa iusto magni
    nisi nostrum officia quasi quo ratione repudiandae saepe sint tenetur, ut voluptatibus. Dolor, rerum!
</div>
<div>A accusamus architecto, asperiores assumenda at deleniti ducimus ea error eum, eveniet explicabo facilis fuga
    fugiat hic iste nobis nostrum odit quaerat ratione rem repudiandae sequi sunt voluptas voluptates voluptatum?
</div>
<div>Asperiores aspernatur consequatur excepturi incidunt iste iure, magni mollitia necessitatibus numquam perspiciatis
    quidem repellat sapiente? Ex explicabo, facere harum mollitia obcaecati quo rem! Ad, doloribus exercitationem omnis
    qui ratione ullam?
</div>
<div>Accusantium adipisci commodi dignissimos earum eos illo maiores minus necessitatibus nihil officia omnis quam,
    ratione sit sunt unde veritatis vero! At est laboriosam voluptatibus? Aut nobis nostrum pariatur quidem totam!
</div>
<div>A ab, aperiam blanditiis culpa distinctio ducimus fugiat incidunt iure laboriosam, minima modi necessitatibus nulla
    odit quasi quidem quisquam reprehenderit. Alias, atque blanditiis doloremque iste minima pariatur quidem rem
    tempora.
</div>
<div>Alias commodi, dolorem eveniet illo maxime odit possimus repellat, sint sit sunt suscipit unde veniam voluptas
    voluptates voluptatum! A dolor fugit sed. Assumenda cum cumque inventore non perferendis qui temporibus.
</div>
<div>Accusantium asperiores distinctio dolorum ea in laboriosam quas ratione totam vitae? Assumenda corporis dignissimos
    modi nesciunt odio voluptatem? Consequatur distinctio ipsam maxime nihil nisi sapiente vitae voluptates. Dicta,
    distinctio harum.
</div>
<div>Debitis dolore, enim minima, molestias necessitatibus nobis odit praesentium quia, quis recusandae repellendus
    repudiandae rerum. Aliquam at dicta dignissimos doloremque dolores, eum fuga itaque quibusdam saepe similique
    tenetur ut voluptas.
</div>
<div>Consequuntur cum dignissimos dolore error, excepturi ipsum, magnam maxime nisi optio quas rem, repellat sint ut.
    Adipisci, aliquid architecto eaque, earum excepturi fuga iure molestias porro recusandae reiciendis soluta ullam?
</div>
<div>Ad aliquam, aut blanditiis dolore, ea earum est exercitationem illo iste laudantium magnam, magni nam nemo nesciunt
    odit perspiciatis quam qui quidem quo repellendus rerum sint suscipit voluptate voluptatem voluptatum?
</div>
<div>Ad alias blanditiis, esse iusto laudantium magni, officia pariatur possimus qui quia quod rerum sapiente,
    voluptate. Accusantium blanditiis dolor expedita harum illo molestias quibusdam tempora! Dolorum fugiat iure numquam
    tempora?
</div>
<div>Adipisci architecto autem consectetur cupiditate dicta dolore eligendi ex fugiat impedit inventore iure, maiores
    molestiae numquam obcaecati, quos ratione sequi. Ab cumque ducimus maiores numquam officiis quidem quod sed sit.
</div>
<div>Deleniti dolores excepturi facere illo illum placeat quae, quia temporibus! Aspernatur aut corporis dolore error
    illo libero, minus molestias nobis nulla optio quaerat quas ratione rem repudiandae similique tenetur vitae.
</div>
<div>Accusamus consequuntur eius, facilis ipsa minima obcaecati optio quas quo, quos similique tempore tenetur totam
    voluptatem? Ab beatae culpa dicta doloribus ducimus eligendi expedita ipsam, nemo praesentium, suscipit veritatis
    voluptatum?
</div>
<div>Aut blanditiis culpa cupiditate deserunt dicta dignissimos dolor dolore doloremque ducimus eaque eum ex facilis id
    inventore itaque magni maxime modi nam nemo omnis quas, similique tempora ullam vel veniam.
</div>
</body>
</html>